import React, { useEffect, useState } from 'react'
import { Editor } from 'react-draft-wysiwyg'
import { EditorState, convertToRaw, ContentState } from 'draft-js'
import draftToHtml from 'draftjs-to-html'
import htmlToDraft from 'html-to-draftjs'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'


function NewEditor(props) {
  // 编辑器状态，初始化为空，输入后可以刷新
  const [editorState, setEditorState] = useState(null)

  useEffect(() => {
    const html = props.content
    if (html === undefined) return
    const contentBlock = htmlToDraft(html)
    if (contentBlock) {
      const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks)
      const editorState = EditorState.createWithContent(contentState)
      setEditorState(editorState)
    }
  }, [props.content])

  return (
    <div>
      <Editor
        editorClassName="editorClassName"
        editorState={editorState}
        onBlur={() => {
          // console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())))
          // 失去焦点后，给父组件传递编辑器的内容
          props.getContext(draftToHtml(convertToRaw(editorState.getCurrentContent())))
        }}
        onEditorStateChange={(editorState) => setEditorState(editorState)}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"/>
    </div>
  )
}

export default NewEditor